<template>
  <a-form style="width: 100%; height: 100%" :layout="model.layout" :labelCol="model.labelCol"
                :wrapperCol="model.wrapperCol" :labelAlign="model.align">
    <div class="ivz-area-desc" v-if="metas.length == 0">
      <span><DragOutlined />可拖入表单组件</span>
    </div>
    <draggable :list="metas" :options="options" group="item" @add="onAddHandle"
               :animation='200' :move="onMove" style="width: 100%; height: 100%; overflow-y: auto;">
      <template v-for="item in metas">
        <ivz-form-item :key="item.id" :meta="item" type="form"
          :span="24" :data-id="item.id" @delMetaItem="delMetaItem" />
      </template>
    </draggable>
  </a-form>
</template>

<script>
import {reactive} from "vue";
import {mapMutations} from "vuex";
import EditMetas from "@/components/EditMetas";

export default {
  name: "IvzDraggableForm",
  props: ['meta'],
  components: {},
  setup() {
    let metas = reactive([])
    let model = reactive({
      align: null,
      layout: null,
      labelCol: {},
      wrapperCol: {}
    })
    return {metas, model}
  },
  created() {
    if(!this.meta['model']) {
      this.model = EditMetas.getItemModel(this.meta.type);
      this.meta['model'] = this.model;
      this.meta['metas'] = this.metas;

      this.model['id'] = this.meta.id;
      this.model['permId'] = this.meta.id;
      this.model['type'] = this.meta.type;
      this.model['label'] = this.meta.name;
    } else {
      this.model = this.meta['model'];
      this.metas = this.meta['metas'];
    }

    this.activeHandle();
  },
  methods: {
    ...mapMutations(['switchActiveMetaTo']),
    onMove(evt) { },
    onAddHandle() { },
    delMetaItem(meta) {
      this.metas.forEach((item, index) => {
        if(item == meta) {
          this.metas.splice(index, 1);
          this.switchActiveMetaTo(this.meta);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>